<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>view</title>
</head>

<body>

    <!-- start -->
    <div style="display: flex;">
        <div id="chartEpochLoss"
            style="width: 800px;height: 600px;"></div>

        <div id="chartEpochAcc"
            style="width: 800px;height: 600px;"></div>
    </div>

    <div style="display: flex;">
        <div id="chartBatchAllLoss"
            style="width: 800px;height: 600px;"></div>

        <div id="chartBatchAllAcc"
            style="width: 800px;height: 600px;"></div>
    </div>


    <div style="display: flex;">
        <div id="chartBatchLoss"
            style="width: 800px;height: 600px;"></div>

        <div id="chartBatchAcc"
            style="width: 800px;height: 600px;"></div>
    </div>
    <!-- end -->

</body>
<!-- js start -->
<script type="text/javascript"
    src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="
https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js
"></script>

<script type="text/javascript"
    src="./chartBatchAllAcc.js"></script>

<script type="text/javascript">

    /**
     *
     * 1. 请求 https://test-face-vue.oss-cn-shanghai.aliyuncs.com/model/01-mnist-default/2024-09-16-002835/trainLog.json 数据
     * 
     * 2. 绘制折线图
     */

    // 请求数据
    const request = (url) => {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = function () {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.responseText));
                } else {
                    reject(xhr.statusText);
                }
            };
            xhr.onerror = function () {
                reject(xhr.statusText);
                console.log('error');
            }
            xhr.open('GET', url);
        })
    }

    /** 绘制损失率 **/
    const drawChartBatchLoss = (data) => {
        const myChart = echarts.init(document.querySelector('#chartBatchLoss'));

        console.log(`[data]:`, data);
        console.log(data.batch[0].batchData.map(item => item.batch));

        const legendData = [];
        function getSeries() {
            const series = [];
            Object.keys(data.batch).map((bKey, bIndex) => {
                series.push({
                    name: `Epoch-${bIndex}`,
                    data: data.batch[bKey].batchData.map(dItem => dItem.loss),
                    showSymbol: false,
                    type: 'line'
                })

                legendData.push(`Epoch-${bIndex}`)
            });

            return series;
        }

        myChart.setOption({
            title: {
                text: 'chartBatchLoss'
            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     params = params[0];
                //     var date = new Date(params.name);
                // },
            },
            legend: {
                data: legendData
            },
            xAxis: {
                type: 'category',
                data: data.batch[0].batchData.map(item => item.batch)
            },
            yAxis: {
                type: 'value'
            },
            series: getSeries()
        })
    }

    /** 绘制 -  **/
    const drawChartBatchAcc = (data) => {
        const myChart = echarts.init(document.querySelector('#chartBatchAcc'));

        console.log(`[data]:`, data);
        console.log(data.batch[0].batchData.map(item => item.batch));

        const legendData = [];
        function getSeries() {
            const series = [];
            Object.keys(data.batch).map((bKey, bIndex) => {
                series.push({
                    name: `Epoch-${bIndex}`,
                    data: data.batch[bKey].batchData.map(dItem => dItem.acc),
                    showSymbol: false,
                    type: 'line'
                })

                legendData.push(`Epoch-${bIndex}`)
            });

            return series;
        }

        myChart.setOption({
            title: {
                text: 'chartBatchAcc'
            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     params = params[0];
                //     var date = new Date(params.name);
                // },
            },
            legend: {
                data: legendData
            },
            xAxis: {
                type: 'category',
                data: data.batch[0].batchData.map(item => item.batch)
            },
            yAxis: {
                type: 'value'
            },
            series: getSeries()
        })
    }

    /** 绘制损失率 **/
    const drawChartEpochLoss = (data) => {
        const myChart = echarts.init(document.querySelector('#chartEpochLoss'));

        function getSeries() {
            const series = [];
            series.push({
                name: `loss`,
                data: data.epoch.map(dItem => dItem.loss),
                showSymbol: false,
                type: 'line'
            })

            series.push({
                name: `val_loss`,
                data: data.epoch.map(dItem => dItem.val_loss),
                showSymbol: false,
                type: 'line'
            })

            return series;
        }

        myChart.setOption({
            title: {
                text: 'chartEpochLoss'
            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     params = params[0];
                //     var date = new Date(params.name);
                // },
            },
            legend: {
                data: ['loss', 'val_loss']
            },
            xAxis: {
                type: 'category',
                data: data.epoch.map((item, index) => `轮次 ${index}`)
            },
            yAxis: {
                type: 'value'
            },
            series: getSeries()
        })
    }


    /** 绘制损失率 **/
    const drawChartEpochAcc = (data) => {
        const myChart = echarts.init(document.querySelector('#chartEpochAcc'));

        function getSeries() {
            const series = [];
            series.push({
                name: `acc`,
                data: data.epoch.map(dItem => dItem.acc),
                showSymbol: false,
                type: 'line'
            })

            series.push({
                name: `val_acc`,
                data: data.epoch.map(dItem => dItem.val_acc),
                showSymbol: false,
                type: 'line'
            })

            return series;
        }

        myChart.setOption({
            title: {
                text: 'chartEpochAcc'
            },
            tooltip: {
                trigger: 'axis',
                // formatter: function (params) {
                //     params = params[0];
                //     var date = new Date(params.name);
                // },
            },
            legend: {
                data: ['acc', 'val_acc']
            },
            xAxis: {
                type: 'category',
                data: data.epoch.map((item, index) => `轮次 ${index}`)
            },
            yAxis: {
                type: 'value'
            },
            series: getSeries()
        })
    }


    function init() {
        console.log('init');

        // 从url中获取参数 jsonUrl 字段内容
        const urlParams = new URLSearchParams(window.location.search);
        const jsonUrl = urlParams.get('jsonUrl');

        const useUrl = jsonUrl || './trainLog.json';

        console.log('[useUrl]: ', useUrl);


        $.ajax({
            // url: 'https://test-face-vue.oss-cn-shanghai.aliyuncs.com/model/01-mnist-default/2024-09-16-002835/trainLog.json',
            // url: 'https://test-face-vue.oss-cn-shanghai.aliyuncs.com/model/01-mnist-default/2024-09-16-180759/trainLog.json',
            url: useUrl,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                console.log(data)

                drawChartEpochLoss(data);
                drawChartEpochAcc(data);

                drawChartBatchAllLoss(data);
                drawChartBatchAllAcc(data);

                drawChartBatchLoss(data);
                drawChartBatchAcc(data);
            },
            error: function (err) {
                console.error(err)
            }
        })
    }

    init()
</script>

</html>